<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>消息详情标题</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../layui/css/admin.css" media="all">
</head>
<style>
  /* 附件通用样式 */
  .attachment-item {
    margin: 10px;
    padding: 15px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  
  /* 图片附件 */
  .attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }
  
  .image-preview {
    height: 180px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.3s;
  }
  
  .image-preview:hover {
    transform: scale(1.02);
  }
  
  /* 视频附件 */
  .video-preview {
    width: 100%;
    height: 200px;
    border-radius: 4px;
    background: #000;
  }
  
  /* 文件信息 */
  .file-info {
    padding: 10px 0;
  }
  
  .filename {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .filesize {
    color: #999;
    font-size: 12px;
  }
  
  /* 文档附件 */
  .attachment-list .attachment-item {
    display: flex;
    align-items: center;
    padding: 10px;
  }
  
  .attachment-list .filename {
    flex: 1;
    margin: 0 15px;
  }

  .layui-badge-container {
  margin-bottom: 10px;
}
.layui-badge {
  margin-right: 5px;
}
  </style>
<body>

  <div class="layui-fluid" id="LAY-app-message-detail">
    <div class="layui-card layuiAdmin-msg-detail">
      <div class="layui-card-header">
        <h1 id="articleTitle">加载中...</h1>
        <div class="layui-badge-container" id="articleTags" style="margin-top: 10px;"></div>
        <p class="layui-word-aux" style="margin-top: 15px;">
          <span id="articleOrganizer"></span>
          <span id="articleDepartment" style="margin-left: 15px;"></span>
        </p>
        <p style="margin-top: 10px;">
          <i class="layui-icon layui-icon-time"></i>
          <span id="articleTimeRange"></span>
        </p>
      </div>
      
      <div class="layui-card-body layui-text">
        <!-- 附件标签页 -->
        <div class="layui-tab layui-tab-brief" lay-filter="attachmentsTab">
          <ul class="layui-tab-title">
            <li class="layui-this">图片附件</li>
            <li>视频附件</li>
            <li>文档附件</li>
          </ul>
          <div class="layui-tab-content">
            <!-- 图片附件 -->
            <div class="layui-tab-item layui-show">
              <div id="imageAttachments" class="attachment-grid"></div>
            </div>
            
            <!-- 视频附件 -->
            <div class="layui-tab-item">
              <div id="videoAttachments" class="attachment-grid"></div>
            </div>
            
            <!-- 文档附件 -->
            <div class="layui-tab-item">
              <div id="docAttachments" class="attachment-list"></div>
            </div>
          </div>
        </div>
  
        <!-- 活动详情内容 -->
        <div class="layadmin-text" id="articleContent">
          <div class="layui-loading" style="margin: 20px 0">数据加载中</div>
        </div>
        
        <div style="padding-top: 30px;">
          <button onclick="history.back()" class="layui-btn layui-btn-primary layui-btn-sm">返回上级</button>
        </div>
      </div>
    </div>
  </div>
  <script src="./JS/utils/request.js"></script>
  <script src="./JS/utils/auth.js"></script>
<script src="../layui/layui.all.js"></script>  
  <script>
  layui.use(['util','jquery','element'], function(){
  var util = layui.util;
  var $=layui.$
  var element = layui.element;
  // // 获取URL参数
  // var activityId = router.search().id;
  // console.log(activityId);
  //获取index.html文件发送的articleId的值
  const urlParams = new URLSearchParams(window.location.search);
          // console.log(urlParams)
  const articleId = urlParams.get('articleid');
  console.log(articleId);
  
  
  // 动态请求数据
  $.ajax({
    url: '/articles/AuditList',
    method:'get',
    dataType:'json',
    data: { articleId: articleId,
     },
     headers:{
              'Authorization':localStorage.getItem('token')
    },
     success: function(res) {
      console.log(res);
      
        if(res.code === 0) {
          renderArticleData(res.data.list[0]);
        } else {
          showError(res.msg || '数据加载失败');
        }
      },
      error: function(xhr) {
        layer.close(loadIndex);
        showError('请求失败：' + xhr.status + ' ' + xhr.statusText);
      }
    
  });

  function renderArticleData(data) {
    // 基础信息
    $('#articleTitle').text(data.title);
    $('#articleOrganizer').html(`<i class="layui-icon layui-icon-user"></i>${data.username}`);
    $('#articleDepartment').html(`<i class="layui-icon"></i>${data.departmentName}`);
    
    // 时间显示
    var submitTime = util.toDateString(data.submitTime, 'yyyy-MM-dd HH:mm');
    $('#articleTimeRange').html(`提交时间：${data.submitTime}`);

    // 活动标签
    var tagsHtml = `<span class="layui-badge layui-bg-blue">${data.categoryName}</span>`
    
    $('#articleTags').html(tagsHtml);

    // 活动内容
    $('#articleContent').html(data.content);
    // 附件处理
    renderAttachments(data.attachment);
        renderAttachments(data.video)
        element.render('collapse'); // 重新渲染折叠面板
  }
// 文件类型判断函数
function getFileType(url) {
    const ext = url.split('.').pop().toLowerCase();
    const imageExt = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
    const videoExt = ['mp4', 'mov', 'avi', 'mkv', 'webm'];
    
    if(imageExt.includes(ext)) return 'image';
    if(videoExt.includes(ext)) return 'video';
    if(ext != null && ext != '') return 'doc';
    return null;
  }

   // 渲染附件
   function renderAttachments(attachments) {
    console.log(attachments);
    
    const containers = {
      image: $('#imageAttachments'),
      video: $('#videoAttachments'),
      doc: $('#docAttachments')
    };
      // 清空容器
      // Object.values(containers).forEach(c => c.empty());

      
        
        const type = getFileType(attachments);
        const html = createAttachmentItem(attachments, type);
        containers[type].append(html);
      

  }

  // 创建附件项
  function createAttachmentItem(attach, type) {
    // const size = formatFileSize(attach.size);
    
    // 通用下载按钮
    const downloadBtn = `
      <a href="${attach}" download="${attach}" 
         class="layui-btn layui-btn-xs layui-btn-primary"
         style="margin-top:5px">
        <i class="layui-icon layui-icon-download"></i>下载
      </a>`;

    if(type === 'image') {
      return `
        <div class="attachment-item">
          <div class="image-preview" 
               style="background-image: url('${attach}')"
               onclick="previewImage('${attach}')"></div>
          <div class="file-info">
            
            ${downloadBtn}
          </div>
        </div>`;
    }

    if(type === 'video') {
      return `
        <div class="attachment-item">
          <video controls class="video-preview">
            <source src="${attach}" type="video/mp4">
            您的浏览器不支持视频播放
          </video>
          <div class="file-info">
            
            ${downloadBtn}
          </div>
        </div>`;
    }
   if(type != null && type =='doc'){
    // 文档类型
    return `
          <div class="layui-panel attachment-item">
            <i class="layui-icon layui-icon-file"></i>
            
            ${downloadBtn}
          </div>`;
   }
    
  }

  // 图片预览功能
  window.previewImage = function(url) {
    layer.photos({
      photos: {
        data: [{ src: url }]
      },
      anim: 5 // 缩放动画
    });
  };

});
  </script>
</body>
</html>